<template>
    <Card :bordered="false" dis-hover class="ivu-mt">
        <Row>
            <Col :xl="{span: 12, offset: 6}" :lg="{span: 12, offset: 6}" :md="{span: 16, offset: 4}"
                 :sm="{span: 20, offset: 2}" :xs="24">
                <Form ref="form" :model="data" :rules="rules" class="ivu-mt" :label-width="labelWidth"
                      :label-position="labelPosition">
                    <FormItem label="用户昵称：" prop="nickName" label-for="nickName">
                        <Input v-model="data.nickName" placeholder="请输入用户昵称" element-id="nickName"/>
                    </FormItem>
                    <FormItem label="性别：" prop="sex" label-for="sex">
                        <Select v-model="data.sex" placeholder="性别" element-id="sex">
                            <Option value="1">男</Option>
                            <Option value="2">女</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="电话：" prop="phonenumber" label-for="phonenumber">
                        <Input v-model="data.phonenumber" placeholder="请输入电话号码" element-id="phonenumber"/>
                    </FormItem>
                    <FormItem label="邮箱：" prop="email" label-for="email">
                        <Input v-model="data.email" placeholder="请输入邮箱" element-id="email"/>
                    </FormItem>
                    <FormItem label="居住地址：" prop="address" label-for="address">
                        <Input v-model="data.address" placeholder="居住地址" element-id="address"/>
                    </FormItem>
                    <FormItem label="用户名：" prop="username" label-for="username">
                        <Input v-model="data.username" placeholder="用户名" element-id="username"/>
                    </FormItem>
                 <!--   <FormItem label="初始登录密码：" prop="password" label-for="password">
                        <Input v-model="data.password" placeholder="初始登录密码" element-id="password"/>
                    </FormItem>-->
                    <FormItem label="所属部门：" prop="deptId" label-for="deptId">
                        <Select v-model="data.deptId" placeholder="请选择部门" element-id="deptId">
                            <Option value="1">研发部</Option>
                            <Option value="2">市场部门</Option>
                            <Option value="3">测试部门</Option>
                            <Option value="4">财务部门</Option>
                            <Option value="5">运维部门</Option>
                        </Select>
                    </FormItem>
                <!--    <FormItem label="所属岗位：" :rop="roleGroup" label-for="roleGroup">
                        <Select v-model="data.roleGroup" placeholder="请选择角色" element-id="roleGroup">
                            <Option value="1">部门经理</Option>
                            <Option value="2">人事专员</Option>
                            <Option value="3">招聘主管</Option>
                            <Option value="4">培训主管</Option>
                            <Option value="5">薪酬绩效主管</Option>
                            <Option value="6">系统管理员</Option>
                        </Select>
                    </FormItem>-->
                 <!--   <FormItem label="入职日期：" prop="date" label-for="date">
                        <DatePicker v-width="'100%'" v-model="data.createTime" placeholder="请选择" element-id="date"/>
                    </FormItem>-->
                    <FormItem>
                        <Button class="ivu-ml" @click="handleReset(data)">取消</Button>
                        <Button class="ivu-ml" type="primary" :loading="loading" @click="handleSubmit">确定</Button>
                    </FormItem>
                </Form>
            </Col>
        </Row>
    </Card>

</template>

<script>
    import SysUser from "@/api/SysUser";
	export default {
		data() {
			return {
				trafficType: '',
				formItem: {
					checkbox: [],
				},
                data:{
                    sex:'',
                    deptId:1,
                    nickName:"",
                    email:"",
                    phonenumber:"",
                    address:"",
                    username:"",
                    password:"",
                },
				loading: false,
				rules: {
                    nickName: [
						{required: true, message: '请输入用户名称', trigger: 'blur'}
					],
                    phonenumber: [
						{required: true, message: '请选择机构', trigger: 'blur'}
					],
					email: [
						{required: true, message: '请输入用户邮箱', trigger: 'blur'}
					],
                    deptId: [
						{required: true, message: '所属部门', trigger: 'change'}
					],
                    sex: [
						{required: true, message: '性别', trigger: 'change'}
					],
                    username: [
						{required: true, message: '用户名', trigger: 'blur'}
					],  address: [
						{required: true, message: '居住地址', trigger: 'blur'}
					],
                    password: [
						{required: true, message: '入职日期', trigger: 'blur'}
					]
				},
			}
		},
		computed: {
			labelWidth() {
				return this.isMobile ? undefined : 140;
			},
			labelPosition() {
				return this.isMobile ? 'top' : 'left';
			}
		},
		created() {
                this.getDtail();
		},
		methods: {
            getDtail() {
                SysUser.getUserInfoById({
                    userId: this.$route.query.userId
                })
                    .then(res => {
                        // 返回数据
                        this.data = res;
                    })
                    .catch(err => {
                        // 异常情况
                    })
            },
			//新增
			handleSubmit() {
				this.$refs.form.validate((valid) => {
					if (valid) {
						this.loading = true;
                        SysUser.updateUser({
                            userId: this.$route.query.userId,
                            sex:this.data.sex,
                            deptId:this.data.deptId,
                            nickName:this.data.nickName,
                            email:this.data.email,
                            phonenumber:this.data.phonenumber,
                            address:this.data.address,
                            username:this.data.username,
                            password:this.data.password,
                        })
                            .then(res => {
                                // 返回数据
                                this.$Message.success('修改成功');
                                this.loading = false;
                                this.$router.push('/employee/comuser')
                            })
                            .catch(err => {
                                // 异常情况
                            })
					} else {
						this.loading = false;
					}
				});
			},
			//取消
			handleReset(name) {
				// this.$refs[name].resetFields();
				this.$router.push('/employee/comuser')
			},

		}

	}
</script>

<style scoped>

</style>
